import useFetch, { fetchOptions } from "http-react"

// TS
type TodoType = {
  id: number;
  title: string;
  userId: number;
  completed: boolean;
};

const todosFetch = fetchOptions<TodoType[]>({
  default: [], // initial data
  fetcher: () => fetch("https://jsonplaceholder.typicode.com/todos"),
});


// Use that options object
function Todos() {
  const { data, loading, refresh } = useFetch(todosFetch);

  return (
    <div>
      <h2 className="text-2xl font-semibold">Todos</h2>
      <button onClick={refresh}>Refresh todos...</button>
      {data.map((todo) => (
        <div key={"todo" + todo.id}>{todo.title}</div>
      ))}
    </div>
  );
}